<template>
	<!-- 注册同时充值vip -->
	<view class="content">
		<view class="top">
			<view class="list-contert">
				<view class="list-item" :class="moneyData.index == 1?'active':''" @click="checkIndex(50,1)">
					<p>金额50元</p>
					<p class="p" :class="moneyData.index == 1?'active_p':''">√</p>
				</view>
				<view class="span"></view>
				<view class="list-item" :class="moneyData.index == 2?'active':''" @click="checkIndex(100,2)">
					<p>金额100元</p>
					<p class="p" :class="moneyData.index == 2?'active_p':''">√</p>
				</view>
				<view class="span">

				</view>
				<view class="list-item" :class="moneyData.index == 3?'active':''" @click="checkIndex(200,3)">
					<p>金额200元</p>
					<p class="p" :class="moneyData.index == 3?'active_p':''">√</p>
				</view>
				<view class="span">

				</view>
				<view class="list-item" :class="moneyData.index == 4?'active':''" @click="checkIndex(300,4)">
					<p>金额300元</p>
					<p class="p" :class="moneyData.index == 4?'active_p':''">√</p>
				</view>
				<view class="span">

				</view>
				<view class="list-item" :class="moneyData.index == 5?'active':''" @click="checkIndex(500,5)">
					<p>金额500元</p>
					<p class="p" :class="moneyData.index == 5?'active_p':''">√</p>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="left">
				金额：{{moneyData.money / 100}} 元
			</view>
			<view class="right-btn" @click="_getVipPay()">
				确认充值
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		getOpenId,
		getVipPay,
		retunVipPay
	} from '../../api/api.js'

	import {
		onShow,
		onPageScroll,
		onReachBottom,
		onPullDownRefresh,
		onLoad
	} from '@dcloudio/uni-app'

	import {
		ref,
		computed,
		reactive
	} from 'vue';

	const moneyData = reactive({
		money: 5000,
		index: 1,
		openId: '',
		code: '',
		changguan: 0
	})

	// 金额选择
	const checkIndex = (money, index) => {
		// moneyData.money = 1
		moneyData.money = money * 100
		moneyData.index = index
	}

	// 获取openId
	const _getOpenId = () => {
		uni.login({
			provider: 'weixin', //使用微信登录
			onlyAuthorize: true,
			success: function(res) {
				getOpenId(res.code).then((res2) => {
					moneyData.openId = res2.open_id
				})
			}
		});
	}
	// 支付会员卡
	const _getVipPay = () => {

		let miaoshu = `充值VIP余额：${moneyData.money}`
		let payMoney = moneyData.money
		// let payMoney = 15
		console.log(moneyData.changguan, payMoney, moneyData.openId, miaoshu);
		getVipPay(moneyData.changguan, payMoney, moneyData.openId, miaoshu).then((res) => {
			console.log('支付预参数', res);
			// 计算金额并生成描述
			let data = res
			uni.requestPayment({
				provider: 'wxpay', // 服务提供商
				appid: res.appid,
				timeStamp: res.timeStamp.toString(),
				nonceStr: res.nonceStr, // 随机字符串
				package: res.package,
				signType: 'RSA', // 签名算法
				paySign: res.paySign, // 签名
				success: function(kon) {
					// 支付成功后的业务逻辑
					console.log('支付成功');
					retunVipPay(moneyData.openId, moneyData.changguan, payMoney, data.timeStamp,
						data.out_trade_no,
						miaoshu).then((res) => {
						console.log(res);
						if (res.result == '充值成功。') {
							uni.showToast({
								title: '支付完成',
								icon: 'none', //如果要纯文本，不要icon，将值设为'none'
								duration: 2000 //持续时间为 2秒
							})
							setTimeout(() => {
								uni.navigateBack()
							}, 5000)
						} else {

						}
					})


				},
				fail: function(err) {
					console.log('支付失败', err);
				},
			});
		})
	}


	onLoad((res) => {
		moneyData.changguan = res.changdiId
		_getOpenId()
	})
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		min-height: 100vh;
		background: linear-gradient(to bottom, rgba(135, 213, 255, 1) 0%, rgba(211, 211, 211, 0.58) 42%, rgba(211, 211, 211, 0) 100%);

		.top {
			margin: 20rpx 20rpx;
			background-color: white;
			border-radius: 20rpx;
			.list-contert {
				height: 300px;
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				border: 1px solid gainsboro;
				border-radius: 10px;

				.list-item {
					padding: 0 20px;
					display: flex;
					justify-content: space-between;

					.p {
						display: none;
					}

					.active_p {
						display: block;
					}
				}

				.span {
					width: 100%;
					background-color: gainsboro;
					height: 1px;
				}

				.active {
					color: red;
				}
			}
		}

		.bottom {
			padding: 20px;
			display: flex;
			justify-content: space-between;
			background-color: #2ab4ff;

			.left {
				font-size: 20px;
				line-height: 46px;
				color: white;
			}

			.right-btn {
				padding: 14px 20px;
				background-color: white;
				color: #2ab4ff;
				border: 1px solid gainsboro;
				border-radius: 14px;
			}
		}
	}
</style>